<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>数据列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="../../lib/layui/css/layui.css">
  <link rel="stylesheet" type="text/css" href="../../css/hp-common.css"/>
</head>

<body>
	<div class="hp-div-form">
<blockquote class="layui-elem-quote">
		<form class="layui-form" id="hp-form">
		   <div class="layui-form-item hp-form-item">
		   	<div class="layui-inline hp-form-inline">
		   		 <label class="layui-form-label hp-form-label">用户名：</label>
		   		<div class="layui-input-inline" style="width: 150px;">
		   			<input type="text" name="" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		   		</div>
		   	</div>
		   	
		   	<div class="layui-inline hp-form-inline">
		   		 <label class="layui-form-label hp-form-label">城市：</label>
		   		<div class="layui-input-inline" style="width: 150px;">
							<select name="city" lay-verify="">
								<option value="">请选择一个城市</option>
								<option value="010">北京</option>
								<option value="021">上海</option>
								<option value="0571">杭州</option>
								<option value="010">武汉</option>
								<option value="021">广州</option>
								<option value="0571">南京</option>
								<option value="010">成都</option>
								<option value="010">天津</option>
								<option value="010">乌鲁木齐</option>
							</select>
		   		</div>
		   	</div>
		   	
		   	
		   	<div class="layui-inline hp-form-inline">
		   		 <label class="layui-form-label hp-form-label">职业：</label>
		   		<div class="layui-input-inline" style="width: 150px;">
		   			<input type="text" name="" placeholder="请输入职业" autocomplete="off" class="layui-input">
		   		</div>
		   	</div>
		   	
		   	<div class="layui-inline hp-form-inline">
		   		<div class="layui-input-inline" style="width: 150px;">
		   		<button class="layui-btn" type="button" ><i class="layui-icon"></i>查询</button>
		   		</div>
		   	</div>
		   	
		   </div>
		</form>
		</blockquote>
	</div>
	<div class="layui-btn-group demoTable">
  <button id="addBtn" class="layui-btn layui-btn-normal" ><i class="layui-icon"></i>添加</button>
  <button class="layui-btn layui-btn-danger" ><i class="layui-icon"></i>删除</button>
  <button id="refrsh" class="layui-btn hp-btn-green"><i class="layui-icon">&#xe669;</i>刷新</button>
</div>
 
<table class="layui-table" lay-data="{cellMinWidth: 80, url:'../json/demo3.json', page:true, id:'demo',showLoad:true}" lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
      <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
      <th lay-data="{field:'username'}">用户名</th>
      <th lay-data="{field:'sex', sort: true}">性别</th>
      <th lay-data="{field:'city'}">城市</th>
      <th lay-data="{field:'sign' }">签名</th>
      <th lay-data="{field:'experience', sort: true}">积分</th>
      
      <th lay-data="{field:'classify'}">职业</th>
      <th lay-data="{field:'wealth',  sort: true}">财富</th>
      <th lay-data="{field:'score',  sort: true, fixed: 'right'}">评分</th>
      <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo1'}">操作</th>
    </tr>
  </thead>
</table>  
	     
<script type="text/html" id="barDemo1">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
            	     
</body>

<script src="../../lib/layui/layui.js"></script> 


<script>
			// 配置
			layui.config({
				base: '../../hpModules/' // 扩展模块目录
			}).extend({ // 模块别名 
				hpWindow: 'hpComponent/hpWindow',
				hpConfig : 'hpComponent/hpConfig',
			});
			layui.use(['form','table', 'hpWindow'],
function() {
	var table = layui.table;
	var $ = layui.$;
	var form=layui.form;
	var hpWindow = layui.hpWindow;

	hpWindow.open("#addBtn", "html/add.html", {
		title: '添加',
		area: ['500px', '350px'],
		btn: ['确认', '取消'],
		anim:1,
		success: function(layero, index){
				    	form.render();
				        form.on('submit(save)', function(data){
				        	// ajax
				          $.get("../json/demo6.json",{},function(json){
				          	if(json && json.code==200){
				          		 console.log('yes');
				          		 layer.close(index);
				          	}else{
				          		layer.msg('数据有误');
				          	}
				          })
				          return false;
				       });
				    },
		yes: function(index, layero) {
						layero.find('.icon-save').click();
						//layer.close(index);
					},
		btn2: function(index, layero) {
			layer.msg('取消 按钮 被点击')
			layer.close(index);
		},
		cancel: function(index, layero) {
			layer.msg('x 按钮 被点击')
		}

	});
	
	
	
	// 表格刷新
   $("#refrsh").click(function(){
   	      //执行重载
      table.reload('demo', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          // 参数
          kd:'kd'
        }
      });
   	
   })
   
   //监听表格复选框选择
  table.on('checkbox(demo)', function(obj){
    console.log(obj)
  });
  
  //监听单元格编辑
  table.on('edit(demo)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    
  });
  
  //监听工具条
  table.on('tool(demo)', function(obj){
    var data = obj.data;
    if(obj.event === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del();
        layer.close(index);
      });
    } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2
        ,value: data.username
      }, function(value, index){
        obj.update({
          username: value
        });
        layer.close(index);
      });
    }
  });
  
  //监听排序
  table.on('sort(demo)', function(obj){
    console.log(this, obj.field, obj.type)
    
    return;
    table.reload('idTest', {
      initSort: obj
      ,where: { //重新请求服务端
        key: obj.field //排序字段
        ,order: obj.type //排序方式
      }
      //,height: 300
    });
  });
  
   

   
  
})
</script>
</body>
</html>
